<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的购物车</title>
    <title>Title</title>
    <script src="/js/common.js"></script>
    <script src="../js/jquery/jquery.min.js"></script>
    <script src="../js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/plugins/My97DatePicker/WdatePicker.js"></script>
    <script src="/js/plugins/jquery-form/jquery.form.js"></script>
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/css/myProfiles.css"/>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/plugins/messager/jquery.bootstrap.min.js"></script>
    <script>
        $(function () {
            //接收在共享与里的user
            var userJsonStr = sessionStorage.getItem("user");
            var user;
            if (userJsonStr) {
                //把字符串解析为json对象
                user = JSON.parse(userJsonStr);
            }
            var totalPage = 2;
            //定义一个临时当前页
            var currentPage = 1;
            $.get("/products/" + user.id +"/product", function (data) {
                totalPage=data.pages;
            },"json");

            //获取当前用户的所有商品
            $.get("/products/" + user.id +"/" +currentPage+"/product", function (data) {
                $("#tableHtml").append(data);
                currentPage+=1;
            },"html");

                //屏幕滚动事件
                $(window).scroll(function () {
                    // console.log($(window).height() +"+"+ $(window).scrollTop() +">="+ $(document).height());
                    if ($(window).height() + $(window).scrollTop()+1 >= $(document).height()) {
                        if (currentPage <= totalPage) {
                            $.get("/products/" + user.id +"/"+currentPage+ "/product", function (data) {
                                $("#tableHtml").append(data);
                                currentPage += 1;
                            });
                        }else{
                            $(document).dialog({
                                type : 'toast',
                                content: '<span class="info-text">到底了</span>',
                                autoClose: 2500
                            });
                        }
                    }
                });

            //动态绑定点击事件
            var href;
            var productId;
            $("#tableHtml").on("click",".payId",function () {
                //获取到商品状态，判断商品时候支付还是退款状态
                var state=$(this).data("state");
                //获取到商品id
                productId = $(this).data("productid");
                console.log(productId);
                //给发起退款绑定个点击事件
                if(state==1){
                    href=$(this).data("href")+"/"+user.id+"/"+productId+"/refund"
                    $.messager.confirm("发起退款","确定要发起退款吗,点击ok健发起退款",function () {
                        $.ajax({
                            url: href,
                            type: "PUT",
                            success: function (data) {
                                if (data.success) {
                                    $.messager.alert("温馨提示","退款成功,欢迎下次光临!!!,再过5秒钟自动刷新")
                                    setTimeout(function () {
                                        //刷新页面
                                        location.reload()
                                    },5000)
                                } else {
                                    $.messager.alert("温馨提示","退款失败,系统繁忙!!!,再过5秒钟自动刷新")
                                    setTimeout(function () {
                                        //刷新页面
                                        location.reload()
                                    },5000)
                                }
                            }
                        })
                    })
                }else{
                    //给支付绑定点击事件
                    href=$(this).data("href")+"/"+user.id+"/"+productId+"/save?state=1"
                    $.messager.confirm("支付","确定要进行支付吗,点击ok健发起付款",function () {
                        $.ajax({
                            url: href,
                            type: "PUT",
                            success: function (data) {
                                if (data.success) {
                                    $.messager.alert("温馨提示","付款成功,欢迎下次光临!!!,再过5秒钟自动刷新")
                                    setTimeout(function () {
                                        //刷新页面
                                        location.reload()
                                    },5000)
                                } else {
                                    $.messager.alert("温馨提示","付款失败,积分不足,请充值后再付款!!!,再过5秒钟自动刷新")
                                    setTimeout(function () {
                                        //刷新页面
                                        location.reload()
                                    },5000)
                                }
                            }
                        })
                    })
                }
            })
        })

    </script>


</head>
<body>
<h1>我的购物车</h1>
<div class="table table-hover listBtn">
        <table class="table table-striped" id="tableHtml">
            <tr>
                <td>商品名称</td>
                <td>图片</td>
                <td>商品单价</td>
                <td>商品数量</td>
                <td>商品状态</td>
                <td>出发时间</td>
                <td>结束时间</td>
                <td>操作</td>
            </tr>
  <!--<table class="table table-striped">-->

    <!--<tr>-->
         <!--<td render-html="list.product.name"></td>-->
        <!--<td><a class="pl-cr-pic" href="/goodDetail.html?id=" target="_blank" render-fun="setHref"-->
               <!--render-key="list.product.id" render-title="list.product.title">-->
            <!--<img rel="nofollow"-->
                 <!--render-src="list.product.covelUrl" width="30px"-->
                 <!--alt="">-->
        <!--</a></td>-->
        <!--<td render-html="list.product.price"></td>-->
        <!--<td render-html="list.stateStr"></td>-->
        <!--<td render-html="list.startTime"></td>-->
        <!--<td render-html="list.endTime"></td>-->
        <!--<td id="isHidden" render-fun="setHidden" render-key="list.state" role="button">-->
            <!--<a data-href="/products" class="pay" render-fun="setPayId" render-key="list.product.id"><b><i class="fa fa-briefcase fa-2x"></i></b>支付</a>-->
        <!--</td>-->
    <!--</tr>-->
<!--</table>-->
        </table>
</div>
</body>
</html>